@use '../../variables.scss' as *;

.axiom-main-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-attachment: fixed;
  color: var(--text-color);
  transition: var(--axiom-main-layout-transition, all 0.5s ease);

  &--desktop {
    flex-direction: row;
  }

  &--mobile {
    flex-direction: column;
  }

  &--sidebar-collapsed {
    .axiom-main-sidebar {
      width: var(--sidebar-collapsed-width);
      
      .logo-text {
        display: none;
      }
    }

    .axiom-main-content {
      margin-left: var(--sidebar-collapsed-width);
    }
  }
}

// 顶部导航样式
.axiom-main-header {
  flex-shrink: 0;
  background-color: var(--bg-color-secondary);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  .axiom-main-layout--desktop & {
    position: sticky;
    top: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--axiom-header-pc-padding, 0 32px);
    box-shadow: var(--axiom-header-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--axiom-header-top-bar-height, 2px);
      background: var(--axiom-header-top-bar-bg, linear-gradient(90deg, var(--primary-color), var(--success-color)));
      opacity: var(--axiom-header-top-bar-opacity, 0.8);
    }
  }

  .axiom-main-layout--mobile & {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    .header-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--mobile-header-height);
      padding: var(--axiom-header-mobile-padding, 0 16px);

      .action-left,
      .action-right {
        flex: 0 0 auto;
        min-width: 50px;
        display: flex;
        align-items: center;
        gap: var(--axiom-header-mobile-action-gap, 8px);
      }

      .action-right {
        justify-content: flex-end;
      }
      
      .title-container {
        flex: 1 1 auto;
        text-align: center;
        overflow: hidden;
      }

      .title {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
      }
    }
  }

  // 移动端筛选器样式
  .header-filter-area {
    background: var(--bg-color-secondary);
    padding: var(--axiom-header-mobile-filter-padding, 12px 16px);
    
    .search-wrapper {
      display: flex;
      gap: var(--axiom-header-mobile-filter-gap, 12px);
      align-items: center;
      
      .search-input-container {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--axiom-header-mobile-search-radius, 20px);
        padding: var(--axiom-header-mobile-search-padding, 10px 14px);
        transition: var(--axiom-header-mobile-search-transition, all 0.3s ease);
        
        &:focus-within {
          border-color: var(--primary-color);
          background: var(--bg-color-tertiary);
          box-shadow: var(--axiom-header-mobile-search-focus-shadow, 0 0 0 2px rgba(var(--primary-color-rgb, 24, 144, 255), 0.1));
        }
        
        .search-icon {
          color: var(--text-color-light);
          margin-right: var(--axiom-header-mobile-search-icon-margin-right, 8px);
          display: flex;
          align-items: center;
        }
        
        .search-input {
          flex: 1;
          border: none;
          outline: none;
          background: transparent;
          color: var(--text-color);
          font-size: var(--axiom-header-mobile-search-input-font-size, 14px);
          
          &::placeholder {
            color: var(--text-color-light);
          }
        }
        
        .clear-icon {
          color: var(--text-color-light);
          margin-left: var(--axiom-header-mobile-clear-icon-margin-left, 8px);
          cursor: pointer;
          font-size: var(--axiom-header-mobile-clear-icon-size, 18px);
          width: var(--axiom-header-mobile-clear-icon-size, 18px);
          height: var(--axiom-header-mobile-clear-icon-size, 18px);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          transition: var(--axiom-header-mobile-clear-icon-transition, all 0.2s ease);
          
          &:hover {
            color: var(--text-color);
            background: var(--bg-color-tertiary);
          }
        }
      }
    }

    .active-filters {
      position: fixed;
      top: var(--axiom-header-mobile-active-filter-top, calc(var(--mobile-header-height) + 60px));
      left: 0;
      right: 0;
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-top: none;
      z-index: 1001;
      padding: var(--axiom-header-mobile-active-filter-padding, 12px 16px);
      animation: slideDown 0.3s ease-out;
      box-shadow: var(--axiom-header-mobile-active-filter-shadow, 0 4px 16px rgba(0, 0, 0, 0.15));
    }
  }
}

// PC端面包屑导航样式
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--axiom-breadcrumb-gap, 8px);
  color: var(--text-color-secondary);
  
  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--axiom-breadcrumb-item-gap, 8px);
    
    &:not(:last-child)::after {
      content: '/';
      margin-left: var(--axiom-breadcrumb-item-gap, 8px);
      color: var(--border-color);
    }
  }

  .breadcrumb-link {
    color: var(--text-color-secondary);
    &:hover {
      color: var(--axiom-breadcrumb-link-hover-color, var(--primary-color));
    }
  }
  
  .current-page {
    color: var(--text-color);
    font-weight: var(--axiom-breadcrumb-current-page-weight, 500);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--axiom-user-info-gap, 8px);
  padding: var(--axiom-user-info-padding, 8px 16px);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--axiom-user-info-radius, 20px);
  color: var(--text-color-secondary);
  transition: var(--axiom-user-info-transition, all 0.3s ease);
  
  &:hover {
    background: var(--axiom-user-info-hover-bg, var(--primary-color-light));
    border-color: var(--axiom-user-info-hover-border-color, var(--primary-color));
    color: var(--axiom-user-info-hover-color, var(--text-color));
  }
  
  i {
    font-size: var(--axiom-user-info-icon-font-size, 16px);
    color: var(--primary-color);
  }
}

// 侧边栏样式
.axiom-main-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background-color: var(--bg-color-secondary);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border-right: 1px solid var(--border-color);
  transition: var(--axiom-sidebar-transition, all 0.3s ease);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1001;

  .logo-container {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
  }

  .logo-icon {
    font-size: var(--axiom-sidebar-logo-icon-font-size, 24px);
    color: var(--primary-color);
  }

  .logo-text {
    margin-left: var(--axiom-sidebar-logo-text-margin-left, 12px);
    font-size: var(--axiom-sidebar-logo-text-font-size, 20px);
    font-weight: var(--axiom-sidebar-logo-text-font-weight, 700);
    color: var(--primary-color);
    white-space: nowrap;
  }

  .main-menu {
    flex-grow: 1;
    padding: var(--axiom-sidebar-menu-padding, 16px 0);

    .menu-item {
      display: flex;
      align-items: center;
      padding: var(--axiom-sidebar-menu-item-padding, 12px 24px);
      color: var(--text-color-secondary);
      text-decoration: none;
      transition: var(--axiom-sidebar-menu-item-transition, all 0.3s ease);
      gap: var(--axiom-sidebar-menu-item-gap, 12px);

      i {
        font-size: var(--axiom-sidebar-menu-item-icon-font-size, 18px);
        width: var(--axiom-sidebar-menu-item-icon-width, 18px);
        text-align: center;
      }

      &:hover {
        background-color: var(--axiom-sidebar-menu-item-hover-bg, var(--primary-color-light));
        color: var(--axiom-sidebar-menu-item-hover-color, var(--text-color));
      }

      &.active {
        color: var(--primary-color);
        font-weight: var(--axiom-sidebar-menu-item-active-weight, 600);
        background: var(--axiom-sidebar-menu-item-active-bg, var(--primary-color-light));
        box-shadow: var(--axiom-sidebar-menu-item-active-shadow, inset 3px 0 0 0 var(--primary-color));
      }
    }
  }
}

// 主内容区域样式
.axiom-main-content {
  flex-grow: 1;
  
  .axiom-main-layout--desktop & {
    margin-left: var(--sidebar-width);
    transition: var(--axiom-content-pc-transition, margin-left 0.3s ease);
    
    &.content--with-sidebar {
      margin-left: var(--sidebar-width);
    }
  }

  .axiom-main-layout--mobile & {
    margin-top: var(--mobile-header-height);
    padding-bottom: var(--axiom-content-mobile-bottom-padding, var(--mobile-header-height));
    
    &.content--with-bottom-nav {
      padding-bottom: var(--axiom-content-mobile-bottom-nav-padding, calc(var(--mobile-header-height) + 20px));
    }
  }
}

// 底部导航样式
.axiom-main-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: var(--mobile-header-height);
  background-color: var(--bg-color-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
  padding: var(--axiom-bottom-nav-padding, 0 10px);
  box-shadow: var(--axiom-bottom-nav-shadow, 0 -2px 8px rgba(0, 0, 0, 0.1));

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-color-secondary);
    text-decoration: none;
    transition: var(--axiom-bottom-nav-item-transition, color 0.3s ease);

    i {
      font-size: var(--axiom-bottom-nav-item-icon-font-size, 20px);
      margin-bottom: var(--axiom-bottom-nav-item-icon-margin-bottom, 4px);
    }

    &.router-link-exact-active {
      color: var(--primary-color);
    }
  }
}

// 页面过渡动画
.fade-enter-active {
  transition: opacity var(--axiom-animation-fade-enter-duration, 0.3s) ease-in;
}

.fade-leave-active {
  transition: opacity var(--axiom-animation-fade-leave-duration, 0.15s) ease-out;
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-to {
  opacity: 0;
}

// 动画
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式调整
@media (max-width: 768px) {
  .axiom-main-layout--desktop {
    .axiom-main-sidebar {
      transform: translateX(-100%);
    }
    
    .axiom-main-content {
      margin-left: 0;
    }
  }
} 